<template>
	<view class="home-container">
		<!-- 出行 -->
		<view class="section">
			<text class="section-title">出行</text>
			<view class="function-list">
				<view class="function-item" v-for="(item, index) in travelFunctions" :key="index"
					@click="handleClick(item)">
					<image :src="item.icon" mode="aspectFit"></image>
					<text>{{ item.name }}</text>
				</view>
			</view>
		</view>

		<!-- 便民服务 -->
		<view class="section">
			<text class="section-title">便民服务</text>
			<view class="function-list">
				<view class="function-item" v-for="(item, index) in convenienceServices" :key="index"
					@click="handleClick(item)">
					<image :src="item.icon" mode="aspectFit"></image>
					<text>{{ item.name }}</text>
				</view>
			</view>
		</view>

		<!-- 住宿/租赁 -->
		<view class="section">
			<text class="section-title">住宿/租赁</text>
			<view class="function-list">
				<view class="function-item" v-for="(item, index) in accommodationRental" :key="index"
					@click="handleClick(item)">
					<image :src="item.icon" mode="aspectFit"></image>
					<text>{{ item.name }}</text>
				</view>
			</view>
		</view>

		<!-- 租客服务 -->
		<view class="section">
			<text class="section-title">租客服务</text>
			<view class="function-list">
				<view class="function-item" v-for="(item, index) in tenantServices" :key="index"
					@click="handleClick(item)">
					<image :src="item.icon" mode="aspectFit"></image>
					<text>{{ item.name }}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				travelFunctions: [{
						icon: 'static/service/icon1.png',
						name: '园区导航'
					},
					{
						icon: 'static/service/icon1.png',
						name: '找空车位'
					},
					{
						icon: 'static/service/icon1.png',
						name: '车牌找车'
					},
					{
						icon: 'static/service/icon1.png',
						name: '停车缴费'
					},
					{
						icon: 'static/service/icon1.png',
						name: '记录车位'
					},
					// ... 其他出行功能
				],
				convenienceServices: [{
						icon: 'static/service/icon1.png',
						name: '访客预约'
					},
					{
						icon: 'static/service/icon1.png',
						name: '园区资讯'
					},
					{
						icon: 'static/service/icon1.png',
						name: '意见反馈'
					},
					{
						icon: 'static/service/icon1.png',
						name: '一键求助'
					},
					// ... 其他便民服务
				],
				accommodationRental: [{
						icon: 'static/service/icon1.png',
						name: '公寓看房'
					},
					{
						icon: 'static/service/icon1.png',
						name: 'VR看房'
					},
					{
						icon: 'static/service/icon1.png',
						name: '购买停车时长'
					},
					// ... 其他住宿/租赁服务
				],
				tenantServices: [{
						icon: 'static/service/icon1.png',
						name: '访客邀请'
					},
					{
						icon: 'static/service/icon1.png',
						name: '服务申请'
					},
					{
						icon: 'static/service/icon1.png',
						name: '报事报修'
					},
					{
						icon: 'static/service/icon1.png',
						name: '会议室预约'
					},
					// ... 其他租客服务
				]
			};
		},
		methods: {
			handleClick(item) {
				console.log(`Clicked on ${item.name}`);
				// 这里可以添加跳转到对应功能页面的逻辑
				uni.showToast({
					title: item.name
				});
			}
		}
	};
</script>

<style scoped>
	.home-container {
		padding: 20px;
	}

	.section {
		margin-bottom: 20px;
	}

	.section-title {
		font-size: 16px;
		/* 减小了字体大小 */
		font-weight: bold;
		margin-bottom: 10px;
	}

	.function-list {
		display: flex;
		flex-wrap: wrap;
	}

	.function-item {
		width: calc(25% - 10px);
		margin: 5px;
		text-align: center;
		display: flex;
		/* 使用flex布局 */
		flex-direction: column;
		/* 设置为垂直排列 */
		align-items: center;
		/* 水平居中 */
	}

	.function-item image {
		width: 40px;
		/* 减小了图标的宽度 */
		height: 40px;
		/* 减小了图标的高度 */
		margin-bottom: 5px;
		/* 给图标与文本之间添加一些间距 */
	}

	/* 调整文本的字体大小 */
	.function-item text {
		font-size: 12px;
		/* 减小了文本的字体大小 */
	}
</style>